<template>
    <view class="star" :style='{"--space-width": space + "px"}'>
        <view class="item">
            <uni-icons custom-prefix="iconfont" :size="size" :color="level >= 1 ? '#FECF02' : '#888' "
                type='icon-e-taiyang'></uni-icons>
        </view>
        <view class="item">
            <uni-icons custom-prefix="iconfont" :size="size" :color="level >= 2 ? '#FECF02' : '#888' "
                type='icon-e-taiyang'></uni-icons>
        </view>
        <view class="item">
            <uni-icons custom-prefix="iconfont" :size="size" :color="level >= 3 ? '#FECF02' : '#888' "
                type='icon-e-taiyang'></uni-icons>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            score: {
                type: Number,
                default: 0
            },
            size: {
                type: Number,
                default: 40
            },
            space: {
                type: Number,
                default: 20
            }
        },
        data: function() {
            return {
                level: 0
            }
        },
        watch: {
            score: {
                handler: function(n) {
                    this.level = this.getLevel(n);
                },
                immediate: true
            }
        },
        computed: {},
        methods: {
            getLevel: function(n) {
                if (!n) return 0;
                if (n < 50) {
                    return 1;
                } else if (n < 80) {
                    return 2;
                } else {
                    return 3;
                }
            }
        }

    }
</script>

<style lang="scss" scoped>
    .star {
        display: flex;
        flex-direction: row;
        align-items: center;

        .item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex: 1;
            margin: 0;
            margin-right: var(--space-width);
        }

        .item:last-child {
            margin-right: 0;
        }
    }
</style>